<!DOCTYPE html>
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title>搜索引擎</title>
	<link rel="stylesheet" href="css/bootstrap.min.css">  
	<link rel="stylesheet" type="text/css" href="css/style.css" />
    <script type="text/javascript" src="js/vue.js"></script>
	<style>
    #list {
    	/*
    	width: 100%;
        display: flex;
		flex-wrap: wrap;
		justify-content: center;*/
		-moz-column-count:3; /* Firefox */
		-webkit-column-count:3; /* Safari 和 Chrome */
		column-count:3;
		-moz-column-gap:40px; /* Firefox */
		-webkit-column-gap:40px; /* Safari 和 Chrome */
		column-gap:40px;
		margin-bottom: 100px;
    }
    #search {
    	width:200px;
    	height: 30px;
    	display: flex;
    	flex-direction: row;
    	justify-content: flex-end;
    	align-items: center;
    }
    .search-input {
    	background-color:#fff !important;
    	margin: 0
    } 
    .license {
    	break-inside: avoid;
    	width: 300px;
    	padding:0 10px 10px 10px;
    	margin: 0 0 30px 0;
    	border-radius: 10px;
		-moz-box-shadow:0px 2px 6px #DBDBDB; 
		-webkit-box-shadow:0px 2px 6px #DBDBDB; 
		box-shadow:0px 2px 6px #DBDBDB;
    }
    .license-name {
    	font-size: 20px;
    	font-weight: 700;
    	color: #2ca5de;
    	font-family: "Gill Sans", sans-serif;
    }
    .license-name:hover {
    	text-decoration:underline;
    	color: #0b52cb
    }
    .first-line {
    	/*border-top: 1px #3333332b solid;*/
    	margin: 0 0 10px 0;
    	padding-top: 10px;
    	display: flex;
    	justify-content: space-between;
    	align-items: center;
    }
    .second-line {
    	display: inline-block;
    	border-radius: 4px;
    	padding: 0 5px 0 5px;
    	margin:0 5px 5px 0;
    	color: #fff;
    	background-color: red;
    	line-height: 25px;
    	height: 25px
    }
    .active {
    	color: #2ca5de;
    }
	</style>

<script>




</script>
</head>
<body style="background-color:#FFF">
    <!--导航栏-->
	<div class="row box" style="background-color:#000; font-size:16px">
        <div class="" id="myNavbar" style="min-height:81px;">
            <img src="images/icon/logo.png" width=52px height=52px class="img-circle nav navbar-nav" 
            style="margin-left:12vw;transform: translateY(14px);">
            <ul class="nav navbar-nav sethover" style="text-align:center; margin-right:60px" >
                <li class="active dropdown"><a href="index.html">首页</a></li>
                <li class="active dropdown">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown">开源资源</a>
                    <ul class="dropdown-menu">
                        <li><a href="opensource_software.html">开源软件</a></li>
                        <li><a href="open_source_license.html">开源许可证</a></li>
                        <li><a href="open_source_works.html">开源作品</a></li>
                        <li><a href="open_source_license.html">开源许可证</a></li>
                        <li><a href="open_source_works.html">开源作品</a></li>
                    </ul>
                </li>
                <li class="active dropdown">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown">开源资源</a>
                    <ul class="dropdown-menu">
                        <li><a href="opensource_software.html">开源软件</a></li>
                        <li><a href="open_source_license.html">开源许可证</a></li>
                        <li><a href="open_source_works.html">开源作品</a></li>
                        <li><a href="open_source_license.html">开源许可证</a></li>
                        <li><a href="open_source_works.html">开源作品</a></li>
                    </ul>  
                </li>
                <li class="active dropdown">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown">许可证工具</a>
                    <ul class="dropdown-menu">
                        <li><a href="search_engine.html">搜索引擎</a></li>
                        <li><a href="the_selector.html">选择器</a></li>
                    </ul>
                </li>
                <li class="active dropdown">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown">关于我们</a>
                    <ul class="dropdown-menu">
                        <li><a href="#">开源新资讯</a></li>
                        <li><a href="#">许可证维度</a></li>
                        <li><a href="#">许可证生成</a></li>
                    </ul>
                </li>
    		<!--    <li id="search" class="panel-collapse collapse" style="margin-left:400px;"><a>123132</span></a></li>-->
            </ul>
            <ul class="nav navbar-nav">
            <input type="text" placeholder="请输入内容" class="form-control" style="display:inline; margin:25px 0 0 35px; width:120px">
            <button style=" margin:0 30px 0 0; background-color:transparent;color:#999;border:0;" href="#"> 
                <span class="glyphicon glyphicon-search search-icon"></span>
            </button>
            <div style="display:inline-block; width:150px">
            <a href="#" class="login" id="login-admin">管理员</a>
            <span style="padding:0 5px 0 5px">●</span>
            <a href="#" class="login" id="login-common">普通用户</a>
            </div>
        </div>
	</div>
	<div class="container" id="app"> 
    	<div class="mask"> </div>  	
		<div class="row" style="display: flex;flex-direction: column;justify-content: center;align-items:center;">
            <div class="row common-title text-align-center">
                <p><span>许可证列表</span></p>
            </div>
            <div id="search" style="border: 1px #b9b9b9 solid;height: 30px;border-radius: 3px">
            	<div style="width: 90%"></div>
				<div style="border-left: 1px #b9b9b9 solid;padding:0 7px 0 7px">
					<span class="glyphicon glyphicon-search"></span>
				</div>    
			</div>
            <br>
            <div id="list">
            	<div class="license" v-for="(item, index) in licenses"  @mouseenter="mouseOver(index)" @mouseleave="i=-1" >
            		<div class="first-line">
            			<a class="license-name"> {{item.name}} </a>
            			<div style="display: inline-block;" v-bind:class="{ active: index === i }">
            				<span class="glyphicon glyphicon-comment" style="padding-right:8px">
            				</span>{{item.comments}}
            			</div>
            		</div>
            		<div>
            			<div class="second-line" style="background-color: #51cb60" v-show="index !== i">
            				{{item.right.length}}条规则
            			</div>
            			<div class="second-line" style="background-color: #51cb60" v-for="right in item.right" v-show="index == i">
            				{{right}}
            			</div>
            			<div class="second-line" style="background-color: #e2c14b" v-show="index !== i">
            				{{item.right.length}}条规则
            			</div>
            			<div class="second-line" style="background-color: #e2c14b" v-for="obligation in item.obligation" v-show="index == i">
            				{{obligation}}
            			</div>
            			<div class="second-line" style="background-color: #e85f5f" v-show="index !== i">
            				{{item.prohibition.length}}条规则
            			</div>
            			<div class="second-line" style="background-color: #e85f5f" v-for="prohibition in item.prohibition" v-show="index == i">
            				{{prohibition}}
            			</div>
            		</div>
            	</div>
            	<div class="license" v-for="(item, index) in hideLicense" style="opacity: 0">
            		<div class="first-line">
            			<a class="license-name"> 0 </a>
            			<div style="display: inline-block;">
            				<span class="glyphicon glyphicon-comment" style="padding-right:8px">
            				</span>0
            			</div>
            		</div>
            		<div>
            			<div class="second-line" style="background-color: #51cb60" v-show="index !== i">
            				0
            			</div>
            			<div class="second-line" style="background-color: #e2c14b" v-show="index !== i">
            				0
            			</div>
            			<div class="second-line" style="background-color: #e85f5f" v-show="index !== i">
            				0
            			</div>
            		</div>
            	</div>
            </div>
 
        </div>
	</div>

    <!--下载栏-->
    <div id="download-list" tabindex="0">
    	<div class="second-title color-white text-align-center" style="width:350px;">
            <span style="margin-left:60px;margin-right:50px;">下载列表</span>
            <a id="download-out"><span class="glyphicon glyphicon-log-out" style="top:4px"></span></a>
        </div>
        <table class="third-title color-white download-table" style="width:330px;margin-left: 20px">
            <tr>
                <td style="width: 85%"></td>
                <td style="width: 15%"></td>
            </tr>
            <tr>
                <td><span>1、下载列表</span></td>
                <td><a  class="forth-title"><span>删除</span></a></td>
            </tr>
            <tr>
                <td><span>2、下载列表asdasd</span></td>
                <td><a  class="forth-title"><span>删除</span></a></td>
            </tr>
            <tr>
                <td><span>3、下载列表asdasdasd</span></td>
                <td><a  class="forth-title"><span>删除</span></a></td>
            </tr>
        </table>
        <div class="second-title color-white text-align-center" style="width:350px;bottom:0;position: fixed">
            <table class="third-title color-white"  style="width:330px;margin-left: 20px">
                <tr>
                    <td><a><span>上一页</span></a></td>
                    <td class="second-title"><a><span>下载</span></a></td>
                    <td><a><span>下一页</span></a></td>
                </tr>
            </table>
        </div>
    </div>

    <!--登录注册-->
    <div id="login-table">  
        <div class="third-title color-white" style=background-color:#000;color:#fff"">
            <span style="margin-left: 20px" id="login-type">管理员登录</span>
            <a class="login-close">
                <span class="glyphicon glyphicon-remove-circle" style="float: right;top:16px;right: 16px">
                </span>
            </a>
        </div>
        <table style=" margin-left: 30px; margin-top: 10px" class="forth-title">
            <tbody>
            <tr>
                    <td style="width: 15%"></td>
                    <td style="width: 80px">登录名：</td>
                    <td><input type="text" value="loginName" placeholder="请输入登录名"  maxlength="10" 
                        style="width: 120px;"></td>
                    <td></td>
            </tr>
             <tr>
                    <td></td>
                    <td>密码：</td>
                    <td><input type="password" value="loginPassword" placeholder="请输入密码" 
                        maxlength="16" style="width: 120px;"></td>
                    <td></td>
            </tr>
             <tr>
                    <td></td>
                    <td>验证码：</td>
                    <td><input type="text" value="code" placeholder="空" maxlength="4" style="width: 50px;"></td>
                    <td id="codeImg"></td>
            </tr>                        
        </table>
        <div class="third-title">
            <a id="login-button"><span style="margin-left: 30%">登录</span></a>
            <a id="register-button" class="fifth-title"><span style="margin-left: 40px">点击注册</span></a>
        </div>
    </tbody>
    </div>

    <!--页脚-->
	<div class="otherfoot">
    	<a id="open-download">
            <div id = "download-button" class="shadow second-title">
                <span class="glyphicon glyphicon-download-alt"></span>
            </div>
        </a>
		<img src="images/icon/logo.png" width=60px height=60px class="img-circle" style="margin-left:20vw; border:0;">
		<div class="othercopyright">
			Copyright &copy; 西南大学<a href="http://www.swu.edu.cn/" target="_blank" title="西南大学">www.swu.edu.cn</a>       
		</div> 
	</div>
</body>
	<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
	<script src="js/bootstrap.min.js"></script>
    <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script> 
	<script type="text/javascript" src="js/choose.js"></script>
    <script type="text/javascript" src="js/common.js"></script>
    <script type="text/javascript">

    	var lin = [
				    {
				        "name":"许可证1",
				        "right":["属性23","阿斯顿Ar2","萨达r3"],
				        "obligation": ["属性o1","属性o2","属性o3"],
				        "prohibition": ["属性p1","属性p2","属性p3"],
				        "comments":3.5
				    },
				    {
				        "name":"许可证2",
				        "right":["属性r1","r2","r3"],
				        "obligation": ["o1","属性o2","o3"],
				        "prohibition": ["属性p1","p2","p3"],
				        "comments":5.9
				    },
				    {
				        "name":"许可证7",
				        "right":["r1","r2","属性r3"],
				        "obligation": ["o1","o2","属性o3"],
				        "prohibition": ["属性p1","p2","p3"],
				        "comments":8.8
				    },
				    {
				        "name":"许可证8",
				        "right":["r1","r2","属性r3"],
				        "obligation": ["属性o1","o2","o3"],
				        "prohibition": ["p1","p2","p3"],
				        "comments":8.8
				    },
				    {
				        "name":"许可证9",
				        "right":["属性r1","r2","r3"],
				        "obligation": ["o1","属性o2","o3"],
				        "prohibition": ["p1","属性p2","p3"],
				        "comments":8.8
				    },
				    {
				        "name":"许可证10",
				        "right":["r1","r2","r3"],
				        "obligation": ["o1","o2","o3"],
				        "prohibition": ["p1","p2","p3"],
				        "comments":8.8
				    },
				    {
				        "name":"许可证10",
				        "right":["r1","r2","r3"],
				        "obligation": ["o1","o2","o3"],
				        "prohibition": ["p1","p2","p3"],
				        "comments":8.8
				    },
				    {
				        "name":"许可证9",
				        "right":["属性r1","r2","r3"],
				        "obligation": ["o1","属性o2","o3"],
				        "prohibition": ["p1","属性p2","p3"],
				        "comments":8.8
				    },
				    {
				        "name":"许可证10",
				        "right":["r1","r2","r3"],
				        "obligation": ["o1","o2","o3"],
				        "prohibition": ["p1","p2","p3"],
				        "comments":8.8
				    },
				    {
				        "name":"许可证10",
				        "right":["r1","r2","r3"],
				        "obligation": ["o1","o2","o3"],
				        "prohibition": ["p1","p2","p3"],
				        "comments":8.8
				    },
				    {
				        "name":"许可证9",
				        "right":["属性r1","r2","r3"],
				        "obligation": ["o1","属性o2","o3"],
				        "prohibition": ["p1","属性p2","p3"],
				        "comments":8.8
				    },
				    {
				        "name":"许可证10",
				        "right":["r1","r2","r3"],
				        "obligation": ["o1","o2","o3"],
				        "prohibition": ["p1","p2","p3"],
				        "comments":8.8
				    },
				    {
				        "name":"许可证10",
				        "right":["r1","r2","r3"],
				        "obligation": ["o1","o2","o3"],
				        "prohibition": ["p1","p2","p3"],
				        "comments":8.8
				    },
				    {
				        "name":"许可证10",
				        "right":["r1","r2","r3"],
				        "obligation": ["o1","o2","o3"],
				        "prohibition": ["p1","p2","p3"],
				        "comments":8.8
				    },
				    {
				        "name":"许可证10",
				        "right":["r1","r2","r3"],
				        "obligation": ["o1","o2","o3"],
				        "prohibition": ["p1","p2","p3"],
				        "comments":8.8
				    },
				    {
				        "name":"许可证10",
				        "right":["r1","r2","r3"],
				        "obligation": ["o1","o2","o3"],
				        "prohibition": ["p1","p2","p3"],
				        "comments":8.8
				    }
				];
		var app = new Vue({
			el: '#app',
			data: {
				i: -1,
				'licenses' : lin,
				'hideLicense' : []
			},
			methods:{
	        	mouseOver:function(index){
	        		this.i = index
	        	}
	        },
			mounted:function(){
				console.log("mounted");
				//console.log("ad"+this.licenses);
				let x = 3-lin.length%3;
				if(x==3){
					x = 0;
				}
				console.log("x:"+x)
				let index = 0;
				while(x>0)
				{
					this.hideLicense[index] = {
				        "name":"许可证12",
				    };
					console.log(index+":"+this.hideLicense[index]);
					x--;
					index++;
				}
			}
		});
    </script>>
</html>
